<html>
<head>
	<script src="/jquery/jquery-1.7.2.js"></script>
<style>

body {
	margin: 0px;
	background-color: black;
}

#viewport {
	position: absolute;
	width: 100%;
	height: 100%;
	p adding: 50%;
	overflow: hidden;
}
#foreground {
	position: absolute;
	overflow: hidden;
	width: 320px;
	height: 320px;
	margin: -160px;
}
.system {
	position: absolute;
	width: 40px;
	height: 40px;
	margin: -20px;
	background-color: white;
	text-align: center;
	line-height: 40px;
	border-radius: 20px;
}

</style>
<script>

function centerViewport() {
	function center(id, w, h) {
		var ww = $(id).width();
		var hh = $(id).height();
		$(id).offset({ left: (w-ww)/2, top: (h-hh)/2 });
	}

	var w = $(window).width();
	var h = $(window).height();

//	$("#foreground").offset({ left: (w-320)/2, top: (h-320)/2 });
	center("#foreground", w, h);
}

$(window).resize(function() {
	centerViewport();
});

function buildSystem(name, x, y) {
	var system = document.createElement("div");
	$(system).addClass("system");
	$(system).html(name);
	$(system).css("left", x);
	$(system).css("top", y);
	return system;
}

$(document).ready(function() {
	centerViewport();
	var ids = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
	for (id in ids) {
		var id = ids[id];
		var x = Math.random()*320;
		var y = Math.random()*320;
		$("#foreground").append(buildSystem(id, x, y));
	}
//	$("#foreground").append(buildSystem("A", 30, 100));
//	$("#foreground").append(buildSystem("B", 100, 30));
//	$("#foreground").append(buildSystem("C", 100, 100));
//	$("#foreground").append(buildSystem("D", 130, 130));
});

	function getElementsAtPoint(x, y) {
		var result = new Array();

		function getElementsAtPointRec(parent, x, y) {
			for (c in parent.children) {
				var child = parent.children[c];
				if (!child.getBoundingClientRect) continue;
				var rect = child.getBoundingClientRect();
				if (rect.left < x && rect.right > x &&
					rect.top < y && rect.bottom > y) {
					result.push(child);
					getElementsAtPointRec(child, x, y);
				}
			}
		}

		getElementsAtPointRec(document.body, x, y);
		return result;
	}

$(document).click(function(event) {
	console.log(event.clientX +" "+ event.clientY);
	var elements = getElementsAtPoint(event.clientX, event.clientY);
	console.log(elements);
});

</script>
</head>
<body>

<div id="viewport">
<div id="foreground" style="left: 10px"></div>
</div>

</body>
</html>